/**
 * @name Home
 * @description 首页
 * @author darcrand
 */

import React, { useCallback, useEffect } from 'react'
import { useSetState } from 'ahooks'
import { Button, BackTop, Affix } from 'antd'
import { LikeFilled, MessageFilled } from '@ant-design/icons'

import Header from '@/components-bussiness/Header'
import useReachBottom from '@/hooks/use-reach-bottom'
import { apiGetArticles } from '@/apis/articles'
import styles from './styles.module.less'

const types = [
  { value: 'all', label: '全部' },
  { value: 'frontend', label: '前端' },
  { value: 'backend', label: '后端' },
]

const Home = () => {
  const [params, setParams] = useSetState({ pageNumber: 1, type: types[0].value })
  const [acticles, setActicles] = useSetState({ list: [], hasNext: false })

  const getList = useCallback((params = {}) => {
    const f = async () => {
      try {
        const { list, hasNext } = await apiGetArticles(params)
        setActicles((prev) => ({
          list: params.pageNumber === 1 ? list : prev.list.concat(list),
          hasNext,
        }))
      } catch (err) {
        console.error(err)
      }
    }
    f()
  }, [])

  const onTypeChange = useCallback(
    (type = '') => () => {
      window.scrollTo({ top: 0, behavior: 'smooth' })
      setParams({ type, pageNumber: 1 })
    },
    []
  )

  useReachBottom(
    useCallback(() => {
      if (acticles.hasNext) {
        setParams((prev) => ({ pageNumber: prev.pageNumber + 1 }))
      }
    }, [acticles.hasNext])
  )

  useEffect(() => {
    getList(params)
  }, [params])

  const onLike = useCallback(
    (id) => (e) => {
      e.stopPropagation()
      console.log('id', id)
    },
    []
  )

  return (
    <>
      <Header />
      <Affix>
        <div className={styles.types_wrapper}>
          <section className={styles.types}>
            {types.map((v) => (
              <span
                key={v.value}
                className={params.type === v.value ? styles.item_active : styles.item}
                onClick={onTypeChange(v.value)}
              >
                {v.label}
              </span>
            ))}
          </section>
        </div>
      </Affix>

      <ul className={styles.articles}>
        {acticles.list.map((v) => (
          <ArticleItem key={v.id} data={v} onLike={onLike} />
        ))}
      </ul>

      <BackTop />
    </>
  )
}

const ArticleItem = ({ data = {}, onLike }) => {
  const onGotoDetail = useCallback(() => {
    window.open('/article/789')
  }, [])

  const onGotoComment = useCallback((e) => {
    e.stopPropagation()
    window.open('/article/789#comment')
  }, [])

  return (
    <li className={styles.item} onClick={onGotoDetail}>
      <section>
        <p className={styles.item_header}>掘金酱·5天前</p>
        <h1>{data?.title}</h1>

        <Button.Group size='small' className={styles.item_footer_tools}>
          <Button type='text' icon={<LikeFilled />} onClick={onLike(data.id)}>
            1
          </Button>
          <Button type='text' icon={<MessageFilled />} onClick={onGotoComment}>
            5
          </Button>
        </Button.Group>
      </section>

      <div className={styles.img}></div>
    </li>
  )
}

export default React.memo(Home)
